<template>
  <div class="menber">
    <header class="menber-top">
      <div class="menber-top-info">
        <img class="menber-avatar" :src="userInfo.photo_url">
        <div class="menber-name">{{userInfo.user_vip.realname}}</div>
        <div class="menber-vip">
          <i class="menber-vip-icon" v-if="userInfo.user_vip.vip_name != '普通用户'"></i>
          <div class="menber-vip-text">{{userInfo.user_vip.vip_name}}</div>
        </div>
        <div class="menber-industry" v-if="userInfo.user_vip.company_info">所属领域: {{userInfo.user_vip.company_info.industry}}</div>
        <div class="menber-top-info-bottom">
          <div class="menber-visitor">{{userInfo.user_vip.visitor_count}}访客</div>
          <div class="menber-contact">{{userInfo.user_vip.contact_count}}次联系</div>
        </div>
      </div>
      <div class="menber-search-box">
        <div class="menber-search-icon"></div>
        <input class="menber-search-input" @input="reqSeach" v-model="key_word" type="text" placeholder="请输入名称进行搜索">
      </div>
    </header>
    <div class="menber-bottom">
      <div class="menber-list" v-for="(item,index) in memberList" :key="index" @click="navigateToMemberCard(item.user_id)">
        <div class="menber-list-warp">
          <div class="menber-list-top">
            <img :src="item.photo_url" class="menber-list-top-avatar"></img>
            <div class="menber-list-top-info">
              <div class="menber-list-name">{{item.realname}} {{item.vip_name}}</div>
              <div class="menber-list-position">{{item.company_info.company_name}}</div>
              <div class="menber-list-position">{{item.company_info.position}}</div>
              <div class="menber-list-industry" v-if="item.company_info.industry">所属领域: {{item.company_info.industry}}</div>
            </div>
            <div class="menber-list-top-call" v-if="item.vip_name != '普通会员'" @click.stop="call(item.phone,item.user_id)">
              <div class="call-icon"></div>
              <div class="call-text">致电</div>
            </div>
          </div>
          <div class="menber-list-bottom">
            <div class="menber-list-bottom-icon">
              <div>简介</div>
            </div>
            <div class="menber-list-bottom-content">{{item.detail}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex';
export default {
  data(){
    return{
      userInfo: {
        user_vip:{
          vip_name: '',
          company_info:{
            industry:'',
            visitor_count:'',
            contact_count:'',
          }
        }
      },
      memberList:[],
      limit:10,
      page:0,
      key_word:"",
    }
  },
  //上拉加载
  onReachBottom () {
    this.page++;
    this.reqChambersElite();
  },
  //下拉刷新
  onPullDownRefresh() {
    this.page = 1; 
    this.reqChambersElite("onPullDownRefresh")
  },
  onShow(){
    this.page = 1;
    this.reqUserInfo();
    this.reqChambersElite('onPullDownRefresh');
  },
  methods:{
    ...mapActions(['reqInsertVipVisitorRecord']),
    async reqUserInfo(){
      let user_token = wx.getStorageSync('userToken');
      let params = {};
      if(!user_token){
        wx.showToast({
          title: "请先登录",
          icon: 'none',
          duration: 1000
        })
        setTimeout(()=>{
          wx.switchTab({
            url: "/pages/meMain/me/main"
          })
        }, 1000)
      }else{
        params.user_token = user_token;
        let res = await this.$api.getUserInfo(params);
        if(res.data.level == "success"){
          let data = res.data.data.user_info;
          this.userInfo = data;
          this.user_id = this.userInfo.user_id;
        }else{
          wx.showToast({
            title: res.data.message,
            icon: 'none',
            duration: 1000
          })
        }
      }
    },
    async reqChambersElite(type){
      let params = {
        is_elite: 0,
        limit: this.limit,
        page: this.page
      };
      let res = await this.$api.getChambersElite(params);
      if(res.data.level == "success"){
        let data = res.data.data;
        if(type == 'onPullDownRefresh'){
          this.memberList = data;
        }else{
          this.memberList = this.memberList.concat(data);
        }
      }else{
        wx.showToast({
          title: res.data.message,
          icon: 'none',
          duration: 1000
        })
      }
    },
    async reqSeach(){
      var params = {}
      if(this.key_word == ''){
        params = {
          is_elite: 0,
          limit: 10,
          page: 0
        };
      }else{
        params = {
          key_word:this.key_word,
          is_elite: 0,
          limit: 50,
          page: 0
        };
      }
      let res = await this.$api.getChambersElite(params);
      if(res.data.level == "success"){
        this.memberList = res.data.data;
      }else{
        wx.showToast({
          title: res.data.message,
          icon: 'none',
          duration: 1000
        })
      }
    },
    //拨打电话
    call(phone,userId){
      var This = this;
      var obj = {
        userId:userId,
        type:'contact'
      }
      wx.makePhoneCall({
        phoneNumber: phone,
        success(){
          This.reqInsertVipVisitorRecord(obj);
        }
      })
    },
    //跳转到个人名片
    navigateToMemberCard(id){
      var obj = {
        userId:id,
        type:'visitor'
      }
      this.reqInsertVipVisitorRecord(obj);
      wx.navigateTo({
        url: '/pages/meMain/memberCard/main?id='+ id
      })
    },
  },
}
</script>

<style lang="scss" scoped>
  .menber{
    min-height: 100vh;
    background-color: #f1f1f1;
    padding-bottom: 80rpx;
    .menber-top{
      height: 510rpx;
      padding: 0 50rpx;
      background-color: #fff;
      background-image: url(../../../../static/images/menber_bg.png);
      background-repeat: no-repeat;
      background-size: 100%;
      position: relative;
      .menber-top-info{
        width: 100%;
        height: 310rpx;
        border-radius: 16rpx;
        color: #fff;
        background: -webkit-linear-gradient(360deg, #fdab17, #fe6704);
        position: relative;
        top: 88rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        .menber-avatar{
          width: 95rpx;
          height: 95rpx;
          border: 4rpx solid #fff;
          border-radius: 50%;
          position: absolute;
          top: -40rpx;
        }
        .menber-name{
          margin-top:68rpx;
          font-size: 32rpx;
        }
        .menber-vip{
          margin-top: 2rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          .menber-vip-icon{
            width: 66rpx;
            height: 40rpx;
            background-image: url(../../../../static/images/vip.png);
            background-repeat: no-repeat;
            background-size: 100%;
            background-position: center center;
          }
          .menber-vip-text{
            margin-left: 12rpx;
            font-size: 26rpx;
          }
        }
        .menber-industry{
          margin-top: 32rpx;
          font-size: 26rpx;
        }
        .menber-top-info-bottom{
          width: 100%;
          margin-top: 48rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          .menber-visitor,
          .menber-contact{
            flex: 1;
            text-align: center;
          }
        }
      }
      .menber-search-box{
        position: absolute;
        left: 50%;
        bottom: 20rpx;
        width: 486rpx;
        height: 55rpx;
        transform: translateX(-50%);
        border: 1px solid #a2a7a7;
        background-color: #fdffff;
        border-radius: 10rpx;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .menber-search-icon{
          width: 55rpx;
          height: 55rpx;
          background-image: url(../../../../static/images/menber_search.png);
          background-repeat: no-repeat;
          background-size: 100%;
          background-position: center center;
        }
        .menber-search-input{
          flex: 1;
          font-size: 28rpx;
        }
      }
    }
    .menber-bottom{
      .menber-list{
        height: 328rpx;
        background-color: #fff;
        border-radius: 12rpx;
        margin-top: 14rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        .menber-list-warp{
          .menber-list-top{
            width: 594rpx;
            height: 147rpx;
            display: flex;
            .menber-list-top-avatar{
              width: 113rpx;
              height: 113rpx;
              border-radius: 50%;
              margin-right: 22rpx;
            }
            .menber-list-top-info{
              width: 411rpx;
              height: 147rpx;
              font-size: 24rpx;
              .menber-list-name{
                margin-top: 14rpx;
                color: #4a4b4b;
              }
              .menber-list-position{
                margin-top: 16rpx;
                color: #4a4b4b;
              }
              .menber-list-industry{
                margin-top: 18rpx;
                color: #9e9f9f;
              }
            }
            .menber-list-top-call{
              width: 48rpx;
              height: 82rpx;
              margin-top: 37rpx;
              .call-icon{
                width: 48rpx;
                height: 48rpx;
                background-image: url(../../../../static/images/dianhua.png);
                background-repeat: no-repeat;
                background-size: 100%;
                background-position: center center;
              }
              .call-text{
                margin-top: 12rpx;
                font-size: 24rpx;
                color: #393737;
              }
            }
          }
          .menber-list-bottom{
            display: flex;
            margin-top: 30rpx;
            .menber-list-bottom-icon{
              width: 83rpx;
              height: 41rpx;
              margin-left: 10rpx;
              margin-right: 16rpx;
              div{
                width: 83rpx;
                height: 37rpx;
                line-height: 37rpx;
                font-size: 22rpx;
                text-align: center;
                background-color: #fd8b0e;
                border-radius: 10rpx;
                color: #fff;
              }
            }
            .menber-list-bottom-content{
              width: 481rpx;
              line-height: 34rpx;
              font-size: 24rpx;
              color: #9e9f9f;
              word-break: break-all;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 3;
              overflow: hidden;
            }
          }
        }
      }
    }
  }
</style>